<template>
	<view>
		<view class="gl-header">
			<view class="gl-header-left" style="gap: 10px; flex-wrap: wrap;">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="refresh"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-error" hover-class="button-error-hover" :hover-stay-time="100"
					@click="contentAlert">
					<uni-icons type="loop" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">手动同步消息</text>
				</view>
				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
			</view>
		</view>

		<view class="gl-body table-container" style="background-color: #f8f8f8;font-size: x-small;"
			:style="{height:swiperH+'px'}">
			<uni-table type="selection" emptyText="暂无更多数据">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>类型</uni-th>
					<uni-th>内容</uni-th>
					<uni-th>远程ID</uni-th>
					<uni-th>时间</uni-th>
					<uni-th>状态</uni-th>
					<uni-th></uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in alertArray" :key="index">
					<uni-td align="center" width="30">{{item.id}}</uni-td>
					<uni-td>{{item.mode_res?.name}}</uni-td>
					<uni-td>{{item.content}}</uni-td>
					<uni-td>{{item.parent}}</uni-td>
					<uni-td>{{item.created}}</uni-td>
					<uni-td>{{item.status===1?'已处理':'未处理'}}</uni-td>
					<uni-td>
						<view style="display: flex;gap: 10px;">
							<view v-if="item.status===0" class="gl-link gl-link-base"> <text
									@click="eventAlert(item.id)">同步</text> </view>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>

		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>

	</view>
</template>

<script>
	import psMethod from '@/common/psMethod';

	export default {
		data() {
			return {
				swiperH: 0,
				count: 0, // 记录数
				page: 1, // 当前页
				size: 50, // 页大小								
				sConf: getApp().globalData,
				search: '',

				alertArray: []
			}
		},
		mounted() {
			console.log('页面挂载');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData()
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			async loadDefData() {
				this.refresh()
			},
			refresh() {
				console.log('refresh');
				let host = this.sConf.host + '/admin/apiMsg/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					ordering: '-id'
				}
				if (this.search.length > 0) {
					data.search = this.search
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载消息通知', res);
					this.alertArray = res.resmsg
					this.count = res.count
					this.size = res.size
				}).catch(err => {
					if (err.rescode === 404) {
						this.page--
					}
				})

			},
			async contentAlert() {
				let host = this.sConf.host + '/admin/apiMsg/';
				let token = this.sConf.auth.token || '';
				let data = {}
				await psMethod.authenticatorPostSync(host, token, data).then(res => {
					console.log('手动同步消息', res);
					uni.showModal({
						title: '完成',
						content: '发送请求成功，等待后台同步完成',
						showCancel: false
					})
				})
			},
			async eventAlert(e) {
				let host = this.sConf.host + '/admin/apiMsg/' + e + '/';
				let token = this.sConf.auth.token || '';
				let data = {
					status: 1
				}
				await psMethod.authenticatorPatchSync(host, token, data).then(res => {
					console.log('手动处理消息', res);
					uni.showToast({
						title: '任务创建成功'
					})
					this.refresh()
				}).catch(err => {
					uni.showToast({
						title: err.resmsg.detail || '请求失败',
						icon: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>